@page "/components/infinitescrolling"

<PageOutlet Url="components/infinitescrolling"
            Title="InfiniteScrolling"
            Description="infinitescrolling component of the bit BlazorUI components" />

<div>
    <DemoPage Name="InfiniteScrolling"
              Description="BitInfiniteScrolling is a container that enables scrolling through a list of items infinitely as long as there are items to fetch and render."
              Parameters="componentParameters"
              PublicMembers="componentPublicMembers"
              GitHubExtrasUrl="InfiniteScrolling/BitInfiniteScrolling.razor"
              GitHubDemoUrl="Extras/InfiniteScrolling/BitInfiniteScrollingDemo.razor">
        <NotesTemplate>
            <BitText>
                To use this component, you need to install the
                <BitLink Href="https://www.nuget.org/packages/Bit.BlazorUI.Extras" Target="_blank">
                    <BitTag Reversed
                            Text="Bit.BlazorUI.Extras"
                            Color="BitColor.SecondaryBackground"
                            IconName="@BitIconName.NavigateExternalInline" />
                </BitLink>
                nuget package, as described in the Optional steps of the
                <BitLink Href="/getting-started">Getting started</BitLink> page.
            </BitText>
        </NotesTemplate>
        <Examples>
            <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
                <BitInfiniteScrolling ItemsProvider="LoadBasicItems" Class="basic" Context="item">
                    <div>Item @item</div>
                </BitInfiniteScrolling>
            </DemoExample>

            <DemoExample Title="EmptyTemplate" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
                <BitInfiniteScrolling ItemsProvider="LoadEmptyItems" Class="basic" Context="item">
                    <EmptyTemplate>
                        <div style="display:flex;width:100%;height:100px;justify-content:center;align-items:center">
                            <b>--- No item ---</b>
                        </div>
                    </EmptyTemplate>
                </BitInfiniteScrolling>
            </DemoExample>

            <DemoExample Title="Advanced" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
                <BitInfiniteScrolling ItemsProvider="LoadAdvancedItems" Class="advanced" LastElementHeight="96px" ScrollerSelector="body" Preload>
                    <ItemTemplate Context="item">
                        <div class="item">Item @item</div>
                    </ItemTemplate>
                    <LoadingTemplate>
                        <div class="loading">
                            <BitEllipsisLoading />
                        </div>
                    </LoadingTemplate>
                </BitInfiniteScrolling>
            </DemoExample>
        </Examples>
    </DemoPage>
</div>